<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品详情页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="__CSS__/amazeui.min.css"/>
    <link rel="stylesheet" href="__CSS__/style.css"/>
    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/amazeui.min.js"></script>
    <script>
        function checkIsInteger(str)
        {
            //如果为空，则通过校验
            if(str == "")
                return true;
            if(/^(\-?)(\d+)$/.test(str))
                return true;
            else
                return false;
        }
        var errordialog=function(c){
            alert(c)
        }
        //检验商品数量
        function checkCounts(id) {
            var Counts = $("#" + id).val();
            if (Counts == "") {
                errordialog("请填写数量!");
                return false;
            }
            else if (!checkIsInteger(Counts)) {
                errordialog("商品数量不是整数!");
                return false;
            }
            else if (Counts < 1) {
                errordialog("商品数量不能小于1!");
                return false;
            }
            else {
                return true;
            }
        }
        function addQty(){
            checkCounts('txtQty');
            var qty = parseInt($('#txtQty').val());
            $('#txtQty').val(qty+1);
        }
        function subtractQty(){
            checkCounts('txtQty');
            var qty = parseInt($('#txtQty').val());
            if(qty <=1){
                errordialog("商品数量不能小于1");
                return;
            }
            $('#txtQty').val(qty-1);
        }
    </script>
</head>

<body>
<style type="text/css">
    .navCir {
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 999;
        background: #fff;
    }
    .navCir li {
        width: 25%;
        padding: 5px;
        background: #fff;
        border-top: 1px solid #f5f5f5;
        float: left;
        text-align: center;
        font-size: 14px;
    }
    .navCir li.active a {
        color: #F03726;
    }
    a:link, a:visited, a:hover {
        text-decoration: none;
        outline: none;
    }
    li {
        list-style: none;
    }
    .detail-box {
        margin-bottom:50px;
    }
    .product-detail-box p {
        margin:0 !important;
    }
    .product-detail-box img {
        width:100%;
    }
    .size-p span{
        margin-bottom: 10px;
        display: inline-block;
    }
</style>
<!--隐藏商品id-->
<input type="hidden" name="pid" value="{$id}">
<div class="container">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a href="#left-link" onclick="goback()">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">{$name}</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
    <!-- banner -->
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'>
        <ul class="am-slides">
            <volist name="imgs" id="vo">
                <li>
                    <img src="{$vo}" style="height:200px">
                </li>
            </volist>
        </ul>
    </div>
    <div class="gray-panel">
        <div class="paoduct-title-panel">
            <h1 class="product-h1">{$name}</h1>
            <p><span class="bold">价格：</span><span class="red2">￥{$min_price}<if condition="$min_price neq $max_price">~{$max_price}</if></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="product-title-gray-text product-points">积分：0</span></p>
        </div>
        <div class="my-search-title-panel">
            <ul class="am-avg-sm-4 am-text-center am-text-sm">
                <li class="am-text-center">销量<br />{$total_sales}件</li>
                <li class="am-text-center">库存<br />{$all_quantity}件</li>
            </ul>
        </div>
        <div class="my-search-title-panel">
            <volist name="sku_name" id="name" key="k">
                <p class="my-search-titp-p am-text-sm bold">{$name.id}</p>
                <p class="size-p" id="{$sku_id[$k-1]['id']}">
                    <volist name="name.vid" id="val" key="kb">
                        <span data-size="{$sku_id[$k-1].id}:{$sku_id[$k-1]['vid'][$kb-1]}" onclick="selectsku(this)">{$val}</span>
                    </volist>
                    <input type="hidden"  name="sku[]" value="" />
                </p>
                <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm"/>
            </volist>

            <script>
                function selectsku(span){
                    $(span).siblings('span').removeClass('click');
                    $(span).addClass('click');
                    var sku = $(span).attr('data-size');
                    console.log(sku);
                    $(span).siblings('input').val(sku);
                }

                /*
                * 异步根据规格获得价格
                * */
                $(function(){
                   $('.size-p span') .bind('click',function(){
                       var truehas;
                       $('.size-p').each(function(){
                           truehas = $(this).children('span').hasClass('click');
                       });
                       if(truehas){
                           var pid = $("[name='pid']").val();
                           var sku = '';
                           $(".size-p > [type='hidden']").each(function(){
                               sku = sku+$(this).val()+';';
                           });
                           $("[name='sku_id']").val(sku);
                           $.post("{:U('ShoppingCart/ajax_getvipprice')}",{pid:pid,sku:sku},function(res){
                               console.log(res);
                               if(res['status']){
                                   var price = res['info']['price'];
                                   $('.red2').html('￥'+price);
                                   $("[name='onlyprice']").val(price);//相应的会员价

                                   $('.product-points').text('积分：'+res['info']['points']);
                               }
                           })
                       }
                   })
                });

            </script>

            <p class="my-search-titp-p am-text-sm bold">数量</p>
            <div style="overflow:hidden">
                <button type="button" class="am-btn am-btn-default" style="float:left" onClick="subtractQty();" ><i class="am-icon-minus"></i></button>
                <input type="number" name="txtQty" id="txtQty" class="am-form-field txt-qty am-text-center am-text-sm" value="1" style=" width:60px; margin-right:0px; height:37px; display:inline; float:left">
                <button type="button" class="am-btn am-btn-default" style="float:left" onClick="addQty();"><i class="am-icon-plus"></i></button>
            </div>
            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm"/>
            <div>
                <ul class="am-avg-sm-2 am-text-center">
                    <center><li class="am-text-center am-padding-sm"><button type="button" class="am-btn am-btn-danger am-btn-block am-radius" onclick="check()">立即购买</button></li></center>
                </ul>
            </div>
        </div>
        <div class="paoduct-title-panel">
            <h2 class="product-h1">商家信息</h2>
            <p><span class="am-fr product-title-gray-text"><a href="tel:88888888" class=" am-text-success"><i class="am-icon-phone"></i> 电话联系</a></span><span class="product-title-gray-text"><i class="am-icon-crosshairs"></i> 浙江省杭州市滨江</span></p>
            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm"/>
        </div>
    </div>
    <!-- 商品详情 -->

    <div data-am-widget="tabs" class="am-tabs am-tabs-d2 detail-box">
        <ul class="am-tabs-nav am-cf">
            <li class="am-active">
                <a href="[data-tab-panel-0]">详情</a>
            </li>
            <li class="">
                <a href="[data-tab-panel-1]">交易记录</a>
            </li>

        </ul>
        <div class="am-tabs-bd">
            <div data-tab-panel-0 class="am-tab-panel am-active product-detail-box">
                {$detail}
            </div>
            <div data-tab-panel-1 class="am-tab-panel ">
                <ul class="am-list am-list-static am-list-border am-list-striped am-text-sm">
                    <li>跌倒的小孩于2016-11-10日购买成功</li>
                    <li>深谷于2016-11-10日购买成功</li>
                    <li>春天的油菜花于2016-9-15日购买成功</li>
                    <li>Andrew于2015-6-5日购买成功</li>
                    <li>Bess于2015-6-5日购买成功</li>
                    <li>Elena爱大东于2015-6-5日购买成功</li>
                </ul>

            </div>

        </div>
    </div>

    <input type="hidden" name="onlyprice"><!--会员价-->
    <input type="hidden" name="sku_id"><!--总共购买的数量-->

    <script type="text/javascript">

        /*
        * 表单提交的校验
        * */
        function check(){
            var count = $("[name='txtQty']").val();
            var sku_id = $("[name='sku_id']").val();
            var pid = $("[name='pid']").val();
            if(sku_id == ''){
                $('.am-modal-bd').text('请选择相应的规格');
                $('#my-alert').modal();
            }else{
                window.location.href = "{:U('Customization/checkout')}"+"?count="+count+"&sku_id="+sku_id+"&pid="+pid;
            }
        }

        /*
        * 返回上一页
        * */
        function goback(){
            window.history.go(-1);
        }
    </script>

    <!--底部-->
    <div class="navCir">
        <li class="active"><a href="{:U('Index/index')}"><i class="am-icon-home "></i>首页</a></li>
        <li><a href="{:U('Classify/index')}"><i class="am-icon-list"></i>分类</a></li>
        <li><a href="{:U('ShoppingCart/index')}"><i class="am-icon-shopping-basket"></i>购物车</a></li>
        <li><a href="{:U('UserCenter/index')}"><i class="am-icon-user"></i>我的</a></li>
    </div>
</div>
<div class="am-modal am-modal-alert am-modal-active" tabindex="-1" id="my-alert" style="display: none;">
    <div class="am-modal-dialog"><div class="am-modal-hd">系统提示</div>
        <div class="am-modal-bd">Hello world！</div>
        <div class="am-modal-footer"><span class="am-modal-btn am-modal-btn-bold">确定</span></div>
    </div>
</div>
</body>
</html>
